<template>
	<view>
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">开团列表</block>
		</cu-custom>

		<view class="whole-box">
			
			<view class="list-box">
				<block v-for="(value,index) in list" :key="index">
				<view  class="goods-item" >
					<view class="goods-thumb" @tap="goGoodsDetail(value.id)">
						<image class="thumb" mode="aspectFill" :src="value.product.picture"></image>
						<text class="sold-out" v-if="value.product.stock <= 0">售罄</text>
					</view>
					<view class="goods_info">
						<view class="title-line" @tap="goGoodsDetail(value.id)">
							<text class="attr" v-if="value.product.pic_skech != ''">{{value.product.pic_skech}}</text>
							<text class="title">{{value.product.name}}</text>
						</view>
						<text class="title" style="height: 40rpx;overflow: hidden;" v-if="value.product.sketch != ''">{{value.product.sketch}}</text>
						<view class="price-action">
							<view class="price-side">
								<view class="price-line">
									<text class="price">￥{{value && value.wholesale_price}}</text>
									<text class="market-price">￥{{value.product.price}}</text>
								</view>
								<view class="award" v-if="value.number_skech != ''">{{value.product.number_skech}}</view>
							</view>
							<view class="action" @tap="goGoodsDetail(value.id)">去拼购</view>
						</view>
					</view>
				</view>
				</block>
				
				<view class="cu-load margin-center" :class="loading?'loading':'over'"></view>
			</view>
			
			
		</view>
			<view class="cu-modal" :class="modalName=='Agreement'?'show':''">
				<view class="cu-dialog">
					<image @click="modalName=''" src="../../static/confrim.png" mode="scaleToFill" class="agreememt-bg"></image>
					
					<view class="agreememt-box">
						<view @click="modalName=''" class="close-bvo">X</view>
						
						<view class="title title-con">系统按照您的选择顺序自动开团，每一开团系统会扣除您{{list[0] && list[0].wholesale_price ? list[0].wholesale_price : ''}}积分或余额</view>
						<view class="confirm-btn" @tap="su_click">我已确认</view>
					</view>
				</view>
			</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cate_id: 0,
				list: [],
				page: 1,
				hasMore: true,
				loading: false,
				theme: this.$config.THEME(),
				whole_ids : [],
				modalName: '',
			};
		},
		onLoad(options) {
			if (options.cate_id) this.cate_id = options.cate_id
			// this.$nextTick(function() {
			// 	uni.startPullDownRefresh({})
			// })
		},
		onShow() {
			this.page = 1
			this.list = []
			
			this.hasMore = true
			this.loading = false
			this.getList();
		},
		methods: {
			ch_con(){
				this.modalName = 'Agreement'
			},
			goGoodsDetail(id) {
				uni.navigateTo({
					url: "/pages/shop/marketing/seven_wholesale?id=" + id
				})
			},
			de_click(){
				this.$http
					.get('del_seven_automatic', {whole_ids:1})
					.then((response) => {
						if (response.data.data == 200) {
							this.$common.showSuccess('操作成功')
							this.page = 1
							this.list = []
							this.hasMore = true
							this.loading = false
							this.getList();
						} else {
							this.$common.showSuccess('操作失败')
						}
					})
					.catch((response) => {
						console.log(response)
						// uni.stopPullDownRefresh()
					})
			},
			
			su_click(){
				let list = this.list;
				// for (var i = 0; i < list.length; i++) {
				// 	if (list[i].select == 1) {
				// 		this.whole_ids.push(list[i].id)
				// 	}
				// }
				let whole_ids = this.whole_ids
				if (whole_ids.length == 0) {
					this.$common.showError('请选择商品')
					return false
				}
				
				let address_id = 0;
				if (this.$common.getCache('address_select') != null) {
					let address = this.$common.getCache('address_select')
					address_id = address.id
				} else {
					uni.navigateTo({
						url:'/pages/member/address/list'
					})
					return 
				}
				this.modalName = ''
				this.$http
					.get('seven_automatic', {whole_ids:whole_ids, address_id:address_id})
					.then((response) => {
						if (response.data.data == 200) {
							this.$common.showSuccess('操作成功')
							this.page = 1
							this.list = []
							this.hasMore = true
							this.loading = false
							this.getList();
						} else {
							this.$common.showSuccess('已在队列中')
						}
					})
					.catch((response) => {
						console.log(response)
						// uni.stopPullDownRefresh()
					})
				
			},
			action_select(index){
				this.$http
					.get('seven_judge', {id:this.list[index].id})
					.then((response) => {
						console.log(response.data.data)
						if (response.data.data.length == 0) {
							if (this.list[index].select == 0) {
								this.list[index].select = 1;
								this.whole_ids.push(this.list[index].id)
							} else {
								this.list[index].select = 0;
								this.whole_ids.splice(this.whole_ids.indexOf(this.list[index].id),1);
			
							}
						} else {
							this.$common.showSuccess('已在队列中')
						}
						console.log(this.whole_ids)
					})
					.catch((response) => {
						console.log(response)
						// uni.stopPullDownRefresh()
					})
				
			},
			getList() {
				if (this.hasMore && !this.loading) {
					this.loading = true
					let param = {
						page: this.page,
						type: 'seven'
					}
					// if (this.cate_id) param.cate_id = this.cate_id
					this.$http
						.get('product_whole', param)
						.then((response) => {
							let list = this.list
							if (response.data.data.length > 0) {
								if (list.length > 0)
									list = list.concat(response.data.data)
								else list = response.data.data
								this.list = list
							} else {
								this.hasMore = false
							}
							this.page += 1
							this.loading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
				}
			},
		},
		onPullDownRefresh() {
			this.hasMore = true
			this.loading = false
			this.page = 1
			this.list = []
			this.getList()
		},
		onReachBottom() {
			this.getList()
		},
	}
</script>

<style>
	.close-bvo{
		width: 100%;
		text-align: right;
		margin-right: 10px;
		font-weight: bold;
		top: 0;
		position: absolute;
		margin-top: 10px;
		
	}
	.cu-dialog{
		background: none!important;
	}
	.cu-modal .cu-dialog {
		width: 576rpx;
		height: 382rpx;
		border-radius: 20rpx;
		overflow: hidden;
		position: relative;
	}
	.cu-dialog .agreememt-bg{
		width: 100%;
		height: 100%;
	}
	.cu-dialog .agreememt-box{
		width: 576rpx;
		height: 382rpx;
		padding: 0 26rpx;
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.agreememt-box .title{
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
		margin-top: 20rpx;
		width: 80%;
	
	}
	.title-con{
		font-size: 32rpx!important;
	}
	.agreememt-box .content{
		margin-top: 60rpx;
		width: 100%;
		padding: 20rpx;
		height: 670rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		text-align: left;
		color: #303030;
		font-size: 24rpx;
	}
	.agreememt-box .radio-box{
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.radio-box .l-radio{
		font-size: 24rpx;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.l-radio radio{
		transform:scale(0.5)
	}
	.agreememt-box .confirm-btn {
		margin-top: 50rpx;
		width: 310rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 32rpx;
		text-align: center;
		background-color: #FFDB0C;
		font-size: 34rpx;
		font-weight: bold;
		color: #000000;
	}
</style>
<style>
	page{
		min-height: 100vh;
		background-color: #FFFFFF;
	}
	.whole-box{
		width: 100%;
		padding: 0 20rpx;
	}
</style>
<style>
	.list-box-2{
		/* margin: 0 20rpx 0;
		width: 710rpx; */
		margin-top: 20rpx;
		width: 100%;
		height: 420rpx;
		position: relative;
	}
	.list-box-2 .lb-bg{
		width: 100%;
		height: 100%;
	}
	.list-box-2 .list-box-2-content{
		width: 710rpx;
		/* height: 324rpx; */
		position: absolute;
		top: 0;
		left: 0;
		padding: 26rpx;
	}
	.list-box-2-content .top-box-2{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.top-box-2 .my-logo-1{
		margin-left: 20rpx;
		width: 120rpx;
		height: 60rpx;
	}
	.top-box-2 .right-box{
		margin-right: 10rpx;
		width: 260rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.right-box image{
		margin-left: 20rpx;
		width: 26rpx;
		height: 26rpx;
	}
	.right-box text{
		margin-right: 10rpx;
		width: 214rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 16rpx;
		background-color: #FFFFFF;
		color: #A08622;
		font-size: 24rpx;
		font-weight: bold;
		text-align: center;
	}
		
	.list-box-2-content .tips-box{
		margin: 20rpx 0rpx 0;
	}
	.tips-box .tips{
		padding: 10rpx 0;
		border-bottom: 2rpx solid #A08622;
		font-size: 24rpx;
		color: #A08622;
		line-height: 30rpx;
	}
	.tips-box .tips:last-child{
		border-bottom: 0;
	}
	
</style>
<style>
	.middle-title{
		margin-top: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.middle-title text{
		flex: 1;
		text-align: right;
		font-size: 24rpx;
		font-weight: bold;
		color: #000000;
	}
	.middle-title image{
		width: 20rpx;
		height: 24rpx;
		flex-shrink: 0;
		margin-left: 6rpx;
		margin-right: 42rpx;
	}
	.list-box {
		
	}
	.list-box .goods-item{
		margin: 20rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.goods-item .goods-thumb{
		width: 200rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
		position: relative;
	}
	.goods-thumb .thumb{
		width: 100%;
		height: 100%;
		border: 1rpx solid #DDDDDD;
		border-radius: 6rpx;
	}
	.goods-thumb .factory{
		position: absolute;
		top: 6rpx;
		left: 0;
		background-color: #FF0000;
		color: #ffffff;
		font-size: 24rpx;
		width: 120rpx;
		text-align: center;
		height: 30rpx;
		line-height: 30rpx;
		border-top-right-radius: 15rpx;
		border-bottom-right-radius: 15rpx;
	}
	.goods-thumb .sold-out{
		width: 100rpx;
		height: 100rpx;
		text-align: center;
		line-height: 100rpx;
		border-radius: 50%;
		background-color: rgba(0,0,0,0.5);
		color: #ffffff;
		font-size: 32rpx;
		position: absolute;
		top: 50rpx;
		left: 50rpx;
	}
	
	.goods-item .goods_info{
		flex: 1;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	.goods_info .title-line{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
	}
	.title-line .attr{
		flex-shrink: 0;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
		background-color: #FFEE8B;
		color: #333333;
		font-size: 24rpx;
	}
	.title-line .title{
		margin-left: 4rpx;
		font-size: 28rpx;
		color: #000000;
		font-weight: bold;
		height: 40rpx;
		overflow: hidden;
	}
	.goods_info .price-action{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.price-action .price-side{
		
	}
	.price-side .price-line .price{
		font-size: 30rpx;
		color: #F32F2F;
		font-weight: bold;
		margin-right: 30rpx;
	}
	.price-side .price-line .market-price{
		font-size: 24rpx;
		color: #B1B1B1;
		text-decoration: line-through;
	}
	.price-side .award{
		margin-top: 10rpx;
		padding: 4rpx 0;
		width: 90rpx;
		text-align: center;
		border-radius: 4rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #FC2B5D;
	}
	.price-action .action{
		margin-right: 10rpx;
		width: 52rpx;
		height: 52rpx;
		border: 2rpx solid #F32F2F;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.price-action .action{
		width: 110rpx;
		height: 40rpx;
		border: 2rpx solid #F32F2F;
		border-radius: 20rpx;
		text-align: center;
		line-height: 36rpx;
		font-size: 24rpx;
		color: #F33434;
	}
</style>